<template>
	<view>
		<!-- <image src="/static/sjimg/bgck.png" mode="widthFix" class="back" @click="back"></image> -->
		<image src="https://m.aqbwg.cn/sourse/xiaowan/dian.jpg" class="bgimg" v-if="merchInfo.pic_door==''||merchInfo.pic_door==null"></image>
		<image :src="imgUrl+merchInfo.pic_door" class="bgimg" v-else></image>
		<view class="spbox">
			<view class="txt0"> {{merchInfo.name}} </view>
			<view class="txbox">
				<text class="t01">消费享 {{ 100-merchInfo.discount }}% 优惠</text>
			</view>
			<view class="xinbox">
				<view class="txt1">{{merchInfo.address?merchInfo.address:'暂无'}}</view>
				<view class="yucss" @click="gomap(merchInfo)"> <uni-icons type="paperplane-filled" size="18"></uni-icons> </view>
				<view class="yucss" @click="callphone(merchInfo.merchant_tel)"> <uni-icons type="phone-filled" size="18"></uni-icons> </view>
			</view>
		</view>
		<view class="heboxs">
			<view class="taboxs" v-for="item in tabs" :key="item.id" @click="gobuy(item)">
				<image :src="item.pic" mode="scaleToFill" class="icimg"></image>
				<text class="itxts">{{item.txt}}</text>
			</view>
		</view>
		<view style="width: 100%;height: 190rpx;"> </view>
		<view class="tbsoda">
			<view class="uisad" @click="buys"> 优惠买单 </view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<view class="pobox">
				<view class="pobox1"> 付款 </view>
				<view class="code">
					<view class="prices">金额 ￥ </view>
					<view class="prijns"> {{ moneys }} </view>
				</view>
				<view class="keyboard">
					<view class="uikyes">
						<button v-for="(item, index) in 9" :key="index" @click="key(index + 1)" class="btns">
							<text>{{ index + 1 }}</text>
						</button>
						<view class="btnsiu">
							<button @click="key(0)" class="btns1">
								<text>0</text>
							</button>
							<button @click="key('.')" class="btns2">
								<text>●</text>
							</button>
						</view>
					</view>
					<view class="rijsa">
						<button @click="del()" class="btns3">
							<uni-icons type="arrow-left" size="30"></uni-icons>
						</button>
						<button @click="sure()"  class="btns4"> 支付 </button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { apiMidxiang , apiTrpay , apiAliopenid } from '@/api/upapi.js';
	
	const merchInfo = ref({});
	const xwmemberInfo = ref({});
	const memberId = ref('');
	const popup = ref(null);
	const moneys = ref('');
	const mids = ref('');
	const imgUrl = ref('https://m.aqbwg.cn/sourse/merchant/');
	const tabs = ref([
		{id:1,pic:'/static/sjimg/ic3.png',txt:'到店'},
		{id:2,pic:'/static/sjimg/ic1.png',txt:'结账'}
	]);
	
	const callphone = (e) => {  uni.makePhoneCall({ phoneNumber: e }); };
	const back = () => { uni.navigateBack({ delta: 1 }) };
	const buys = () =>{ popup.value.open(); };
	const shopData = async (e) => {
		try {
			let res = await apiMidxiang({ mid: e });
			console.log('tt==',res);
			if(res.data.result==0){
				merchInfo.value=res.data.object;
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const key = (key) => {
		if (key === '.' && moneys.value.includes('.')) { return; }
		if (moneys.value === '0' && key!== '.') {
			moneys.value = key.toString();
		} else if (moneys.value == '' && key == '.') {
			moneys.value = '0.';
		} else {
			const newVal = moneys.value + key.toString();
			const decimalIndex = newVal.indexOf('.');
			if (decimalIndex!== -1 && newVal.length - decimalIndex > 3) {
			return;
			}
			moneys.value = newVal;
		}
	};
	const del = () => {
		if (moneys.value.length > 0) {
			moneys.value = moneys.value.substring(0, moneys.value.length - 1);
		}
	};
	const sure = async() => {
		const moneyStr = moneys.value.trim();
		if (moneyStr == '0' || moneyStr == '' || moneyStr.endsWith('.')) { uni.showToast({ title: '支付金额不合法，请重新输入',icon:'none' });return;}
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');
		const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
		const bid = `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
		try {
			let res = await apiTrpay({ 
				type:5,
				openid:xwmemberInfo.value.ali_uId,
				bid:bid,
				merchant_no:merchInfo.value.merchant_no,
				pay_amt:moneyStr
			});
			if(res.data.result==0){
				const orderno =  JSON.parse(res.data.object);
				my.tradePay ({
					tradeNO: orderno.tradeNO,
					success: res => {
						if(res.resultCode=="9000"){
							uni.showToast({ title: '支付成功', icon: 'none' });
							popup.value.close();
						}else{
							uni.showToast({ title: '支付失败', icon: 'none' });
							popup.value.close();
						}
					},
					fail: error => {
						console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
					},
				});
			}else{
				uni.showToast({ title:res.data.msg,icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const gomap=(a)=>{
		uni.openLocation({
			longitude: Number(a.lon),
		    latitude: Number(a.lat),          
		    name: a.name,
		    address: a.address,
		    success: function (res) { },
			fail: function (error) { }
		})
	};
	const getLogin = async () => {
		my.getAuthCode({
		    scopes: 'auth_user',
		    success: async(res) => {
				const res1 = await apiAliopenid({ mid:133, code: res.authCode });
				console.log('optitons====',res1);
				if(res1.data.result==0){
					const data = res1.data.object;
					memberId.value=data.id;
					xwmemberInfo.value = data;
					uni.setStorageSync('xwmemberInfo', data);
					uni.setStorageSync('xwmemberId', data.id);
					// const data = res1.data.object;
					// if (data.member==''||data.member==null) {
					// 	show.value = true;
					// 	tokens.value=data.accessToken;
					// 	openids.value=data.ali_uId;
					// } else {
					// 	uni.setStorageSync('xwmemberInfo', res1.data.object.member)
					// 	uni.setStorageSync('xwmemberId', res1.data.object.member.id)
					// 	loginpopup.value.close();
					// 	isshow.value=false;
					// 	show.value = false;
					// 	memberId.value=res1.data.object.member.id;
					// 	initData();
					// }
				}else{
					uni.showToast({ title: res1.data.msg , icon:'none' }); return;
				}
		    },
		    fail: (err) => {
		        console.error('获取授权码失败：', err);
		    }
		});
	};
	const gobuy = (e) =>{
		if(e.id==2){
			popup.value.open();
		}else{
			uni.navigateTo({ url: '/pagesA/business/meal?mid='+mids.value+'&title='+merchInfo.value.name });
		}
	};
	
	onLoad((option) => {
		mids.value=option.id;
		memberId.value=uni.getStorageSync('xwmemberId');
		xwmemberInfo.value = uni.getStorageSync('xwmemberInfo');
		if(!memberId.value){ getLogin(); };
		shopData(option.id);
	});
</script>

<style>
	page{background-color: #fff;}
</style>
<style lang="scss" scoped>
	.back{
		position: fixed;
		left: 30rpx;
		width: 80rpx;
		top: 80rpx;
		z-index: 8;
		background: #ffffffbd;
		border-radius: 50rpx;
	}
	.mdcss{
		width: 630rpx;
		background-color: #ff5500;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx;
		border-radius: 60rpx;
		position: fixed;
		bottom: 30rpx;
	}
	.bgimg{
		width: 100%;
		height: 600rpx;
	}
	.spbox{
		background-color: #fff;
		border-radius: 30rpx;
		margin-top: -80rpx;
		position: relative;
		padding: 30rpx;
		.txt0{
			font-weight: 600;
			font-size: 32rpx;
		}
		.txbox{
			display: flex;
			align-items: center;
			margin:16rpx 0 ;
			.t01{
				background-color: #fff1e9;
				border-radius: 10rpx;
				padding: 4rpx 10rpx;
				color: #ff5500;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
		.xinbox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.txt1{
				width: 70%;
				color: #797979;
			}
			.yucss{
				background-color: #f5f5f5;
				padding: 4rpx 20rpx;
				border-radius: 40rpx;
			}
		}
	}
	.tbsoda{
		padding: 30rpx 0 60rpx;
		background-color: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		
		.uisad{
			background-color: #ff5500;
			border-radius: 60rpx;
			font-size: 28rpx;
			padding: 30rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 30rpx;
		}
	}
	.heboxs{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		.taboxs{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 47%;
			background-color: #fff7f3;
			border: 2rpx solid #ffd5bf;
			padding: 30rpx 0;
			border-radius: 20rpx;
			.icimg{
				width: 70rpx;
				height: 70rpx;
			}
			.itxts{
				font-size: 26rpx;
				color: #797979;
				margin-top: 8rpx;
			}
		}
	}
	.pobox {
		padding: 30rpx 30rpx 70rpx;
		.pobox1 {
			text-align: center;
			margin-bottom: 30rpx;
		}
		.code {
			margin-bottom: 60rpx;
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
			.prices{
				font-size: 32rpx;
				font-weight: bolder;
				height: 120rpx;
			}
			.prijns{
				font-size:75rpx;
				font-weight: bolder;
				height: 120rpx;
				flex: 1;
				margin-left: 40rpx;
				border-bottom: 2rpx solid #e6e6e6;
			}
		}
		
		.keyboard {
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-between;
			
			.uikyes{
				width: 75%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.btns {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 33%;
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 50rpx;
					height: 120rpx;
				}
				.btnsiu{
					width: 100%;
					display: flex;
					align-items: center;
				}
				.btns1{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 66%;
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 50rpx;
					height: 120rpx;
				}
				.btns2{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 33%;
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 40rpx;
					height: 120rpx;
				}
			}
			.rijsa{
				width: 25%;
				.btns3{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 99%;
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 50rpx;
					height: 120rpx;
				}
				.btns4{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 99%;
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 40rpx;
					height: calc(100% - 125rpx);
					background-color: #1677ff;color: #fff;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
